.app {

    .page-section-header {
        position: fixed;
        display: block;
        height: 2.5rem;
        line-height: 2rem;
        top: 0;
        left: 0;
        right: 0;
        padding: 0.25rem;
        background-color: var(--color-white);
        z-index: 999999;

        &:after {
            content: "";
            position: absolute;
            display: block;
            height: 1px;
            left: -1000px;
            right: -1000px;
            bottom: 0;
            background-color: var(--color-grey-lighter);
        }

        .page-section-header-container {
            max-width: 1200px;
            height: 2rem;
            margin: 0 auto;

            .navbar-left {
                float: left;
            }

            .navbar-right {
                float: right;
            }

            .logo-container {

                .logo {
                    display: block;
                    width: 2rem;
                    height: 2rem;
                    border-radius: 50%;
                    background: url(img/logo.jpg) no-repeat center center / cover;
                }
            }

            .navbar {
                display: block;
                height: 2rem;
                padding: 0;

                .navbar-toggler {
                    display: none;
                    width: 2rem;
                    height: 2rem;
                    line-height: 2rem;
                    padding: 0;
                    border: none;
                    text-align: center;
                    background: transparent;
                }

                .nav-link {
                    height: 2rem;
                    line-height: 2rem;
                    padding: 0 1rem;
                    text-align: center;
                    cursor: pointer;
                }

                .user-center-link {
                    .user-avatar {
                        display: block;
                        width: 1.6rem;
                        height: 1.6rem;
                        line-height: 2rem;
                        margin: 0.2rem 0.25rem 0.2rem 0;
                        border-radius: 50%;
                        float: left;
                    }

                    .user-name {
                        display: inline-block;
                        max-width: 15em;
                        height: 2rem;
                        line-height: 2rem;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                        &:before {
                            content: "Welcome, ";
                            color: var(--color-orange);
                        }
                    }

                    .user-name.inactivated {
                        color: var(--color-grey);
                    }
                }

                .logout-link {
                    color: var(--color-red);
                }
            }
        }
    }
}

@import url(./responsive.postcss);
